<!DOCTYPE html>
<html>
<head>
    <title>Relativity Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Set a white background for the canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // General drawing styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        /**
         * Helper function to draw an arrow from one point to another.
         * @param {CanvasRenderingContext2D} context The canvas context.
         * @param {number} fromx The x-coordinate of the start point.
         * @param {number} fromy The y-coordinate of the start point.
         * @param {number} tox The x-coordinate of the end point.
         * @param {number} toy The y-coordinate of the end point.
         */
        function drawArrow(context, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            context.moveTo(fromx, fromy);
            context.lineTo(tox, toy);
            context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            context.moveTo(tox, toy);
            context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // Define the origin for our coordinate system
        const origin = { x: 80, y: 380 };

        // Draw the coordinate axes
        ctx.beginPath();
        drawArrow(ctx, origin.x - 40, origin.y, origin.x + 420, origin.y); // x-axis
        drawArrow(ctx, origin.x, origin.y + 40, origin.x, origin.y - 320); // y-axis
        ctx.stroke();

        // Label the axes and origin
        ctx.fillText('x', origin.x + 430, origin.y);
        ctx.fillText('y', origin.x, origin.y - 335);
        ctx.fillText('O', origin.x - 20, origin.y + 20);

        // Define and draw the rod AB
        const A = { x: origin.x + 50, y: origin.y };
        const rodLength = 280;
        const phi_deg = 35; // Visual angle for drawing
        const phi_rad = phi_deg * Math.PI / 180;
        const B = {
            x: A.x + rodLength * Math.cos(phi_rad),
            y: A.y - rodLength * Math.sin(phi_rad)
        };

        ctx.beginPath();
        ctx.moveTo(A.x, A.y);
        ctx.lineTo(B.x, B.y);
        ctx.stroke();

        // Add labels for points A and B
        ctx.fillText('A', A.x, A.y + 20);
        ctx.fillText('B', B.x + 20, B.y - 5);

        // Draw and label the angle phi
        const arcRadius = 40;
        ctx.beginPath();
        ctx.arc(A.x, A.y, arcRadius, 0, -phi_rad, true);
        ctx.stroke();
        ctx.fillText('φ', A.x + arcRadius * 0.8, A.y - arcRadius * 0.5);

        // Draw the separate point P and its associated dot
        const dotPos = { x: origin.x + 15, y: origin.y - 20 };
        ctx.beginPath();
        ctx.arc(dotPos.x, dotPos.y, 3, 0, 2 * Math.PI); // The dot
        ctx.fill();
        ctx.fillText('P', dotPos.x, dotPos.y - 30); // The label P

        // Draw the velocity arrows and label
        const v_group = { x: 380, y: 220 };
        ctx.beginPath();
        drawArrow(ctx, v_group.x, v_group.y, v_group.x + 60, v_group.y);
        ctx.stroke();
        ctx.beginPath();
        drawArrow(ctx, v_group.x, v_group.y + 15, v_group.x + 60, v_group.y + 15);
        ctx.stroke();
        ctx.fillText('v', v_group.x + 80, v_group.y + 7.5);

    </script>
</body>
</html>